/**
 * Created by bonnie on 17/9/8.
 */
import React from 'react';
import template from './../../commonui/template';
import  './../../css/User/login.css';
import cookie from './../../commonui/cookie';
import { Link } from 'react-router-dom';
import {Form,Icon,Input,Button,CheckBox,Row,Col} from 'antd';
const FormItem = Form.Item;


class LoginForm extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit=this.handleSubmit.bind(this);
        this.CtrlB=this.CtrlB.bind(this);
        this.success=this.success.bind(this);
        this.getCaptcha=this.getCaptcha.bind(this);
        this.checkCaptcha=this.checkCaptcha.bind(this);
        this.state={
            lb:'Personal',
            formdata:[]
        }
    }
    handleSubmit(e){
        const data=this.props.form.getFieldsValue();
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
        const form = this.props.form;
        const user=form.getFieldValue('phoneNO');
        this.props.getData('LoginRespond.json','',this.success,'test');
        console.log('ajax');
        /***登录成功跳转首页面**/
      /*  const HomeLocation = history.createLocation()*/
        this.props.history.push({pathname:'/UsrHome',query:user,state:{user:user,lb:this.state.lb}});
        cookie.set('user',user,1);
        cookie.set('lb',this.state.lb,1);
        var a =cookie.get('user');
        console.log('cookie-user:'+a);
    }
    success(){
        /****账号cookie******
         * fetch(url, {credentials: 'include'})  fetch 请求可以携带cookie的方式
         */


    }
    getCaptcha(){
        this.setState({
            getCaptcha:'12345'
        })
    }
    checkCaptcha(rule,value,callback){
        console.log(value);
        if(value&&value!==this.state.getCaptcha){
            callback("the captcha is wrong !")
        }else{
            callback();
        }
    }
    CtrlB(e){
        console.log(e.target.id);
        if(this.state.lb!==e.target.id){
            this.setState({
                lb:e.target.id
            })
        }
        debugger;
        console.log(this.state);
    }
    render(){
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <div id='LB'onClick={this.CtrlB}><span id="Personal">Personal</span><span id="Company" >Company</span></div>
                <div>
                    <Form onSubmit={this.handleSubmit} layout="horizontal">
                        <Row>
                            <Col span={18}>
                              <Row>
                                    <Col>
                                        <FormItem label="Telphone"
                                                  labelCol={{span:4}}
                                                  wrapperCol={{span:20}}
                                        >
                                            {getFieldDecorator('phoneNO',{rules:[{required:true,message:'Please input your telephone'}]})(
                                                <Input prefix={<Icon type="phone"/>} style={{fontSize:13}} />
                                            )}
                                        </FormItem>
                                  </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <FormItem label="Captcha" hasFeedBack
                                             labelCol={{span:4}}
                                                  wrapperCol={{span:20}}
                                        >
                                            <Row gutter={24}>
                                                <Col span={12}>
                                                        {getFieldDecorator('captcha',{rules:[{
                                                            required:true,message:'Please input the captcha you got'
                                                        },{
                                                             validator:this.checkCaptcha
                                                        }]})
                                                        (
                                                            <Input size="large"/>
                                                        )}

                                                </Col>
                                                <Col span={12}>

                                                        <Button size="large" onClick={this.getCaptcha}>Get captcha</Button>

                                                </Col>
                                            </Row>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={6}>
                                <Row type="flex" justify="center" align="middle">
                                    <Col>
                                        <button type="primary" htmlType="submit">Login</button>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <div>
                    <Row type="flex" justify="center" align="middle">
                        <Col span={8}>
                            <Link to="/Fgt">Forget </Link>
                        </Col>
                        <Col span={8} offset={8}>
                            <Link to={{pathname:"/registerCsmer",lb:this.state.lb}}>Register</Link>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

const Login =Form.create()(LoginForm);
export default template({
    id: 'Login',
    component: Login
});